<template>
  <div class="co">
    <div class="nei">
      <div class="caidan">
        <el-avatar class="img"
                   :src="this.$store.getters.getuser.avator"
                   @error="true">
          <!-- 错误头像 -->
          <img :src="circleUrl"
               alt="">
        </el-avatar>
        <div class="name">{{this.$store.getters.getuser.name}}</div>
        <div class="list">
          <div class="ul"
               v-for="(item,i) in title"
               :key="i"
               @click="sta(item)"
               :class="{sta:item.path==routers.path}">
            {{item.name}}
            <!-- <router-link :to="item.path"> </router-link> -->
          </div>
        </div>
      </div>
      <div class="lu">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item class="dangqian">{{routers.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <transition mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
    <div class="right"
         :class="{right1:isFixed}">
      <div class="one1"
           v-if="!in1"
           @click="xian">
        <i class="el-icon-arrow-left"></i>
        <span class="rl">领取优惠券</span>
      </div>
      <div class="one2"
           v-else>
        <div class="a">
          <span>领取优惠券</span>
          <i class="el-icon-arrow-right"
             @click="a"></i>
        </div>
        <div class="b">
          <div v-for="i in list"
               :key="i.id"
               class="juan"
               :style="{backgroundImage: 'url(' + ( i.userCount==0? img1 : img2) + ')', backgroundSize:'100% 100%'}">
            <div class="left3">
              <div class="a1">
                <span>{{i.money}}</span>元
              </div>
              <div class="a2">
                满{{i.couponMoney}}使用
              </div>
              <div class="a3">
                有限期:{{i.limitSartAt.substring(0,10)}} 至 {{i.limitEndAt.substring(0,10)}}
              </div>
            </div>
            <div class="right3"
                 @click="i.userCount==0?ling(i.id):''"
                 :class="{a4:i.userCount==0}">
              {{i.userCount==0?'点击领取':'已领取'}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      title: [],
      index: 0,
      routers: {},
      in1: false,
      img1: require('@/assets/img/juan1.png'),
      img2: require('@/assets/img/juan2.png'),
      isFixed: false, //当滚动条高度大于152时是否定位
      scrollHeight: 200,
      list: []
      // userInfo: {} // 用户信息
    }
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    if (localStorage.getItem('userId')) {
      this.isinput();
      if (localStorage.getItem('level') == 2) {
        this.title = [
          { name: '账户首页', path: '/home/conindex/yindex' },
          { name: '订单管理', path: '/home/conindex/order' },
          { name: '购物车', path: '/home/conindex/cart' },
          { name: '发票信息', path: '/home/conindex/invoice' },
          { name: '需求管理', path: '/home/conindex/demand' },
          { name: '收藏管理', path: '/home/conindex/collection' },
          { name: '消息', path: '/home/conindex/news' },
          { name: '地址管理', path: '/home/conindex/address' },
          { name: '我的评价', path: '/home/conindex/evaluate' },
          { name: '审批订单', path: '/home/conindex/approval' }]
      } else {
        this.title = [
          { name: '账户首页', path: '/home/conindex/yindex' },
          { name: '订单管理', path: '/home/conindex/order' },
          { name: '购物车', path: '/home/conindex/cart' },
          { name: '发票信息', path: '/home/conindex/invoice' },
          { name: '需求管理', path: '/home/conindex/demand' },
          { name: '收藏管理', path: '/home/conindex/collection' },
          { name: '消息', path: '/home/conindex/news' },
          { name: '地址管理', path: '/home/conindex/address' },
          { name: '我的评价', path: '/home/conindex/evaluate' },]
      }
      for (var i = 0; i < this.title.length; i++) {
        if (this.title[i].path == this.$route.fullPath) {
          this.routers = this.title[i]
        }
      }
      this.list1()
    } else {
      this.$router.push({ name: 'loginindex' })
      this.$message.error('请先登录')
    }

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // window.addEventListener("scroll", this.initHeight);
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    // 领取优惠卷
    async ling(id) {
      let res = await this.$postRequest("/api/memberCoupon/saveCoupon", {
        userId: localStorage.getItem("userId"),
        couponId: id
      })
      console.log(res)
      this.$message.success(res.msg)
      this.list1()
    },
    // 获取优惠卷列表
    async list1() {
      let res = await this.$postRequest("/api/memberCoupon/getCouponList", {
        userId: localStorage.getItem("userId"),
      })
      console.log('优惠卷', res)
      this.list = res.data.list
    },
    sta(item) {
      this.routers = item
      this.$router.push({
        path: item.path
      })
    },
    isinput() {
      this.$store.commit("setDValue", true);
    },
    xian() {
      this.in1 = true
    },
    a() {
      this.in1 = false
    },
    // 实现吸顶效果，判断滚动条距离顶部的距离
    // initHeight() {
    //   let scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   this.isFixed = scrollTop > this.scrollHeight ? true : false;
    // },
  },
  // destroyed() {
  //   window.removeEventListener("scroll", this.initHeight, false);
  // }
}
</script>
<style scoped lang="scss">
.co {
  background-color: #f9f9f9;
  position: relative;
  .nei {
    width: 1400px;
    min-height: 900px;
    margin: 0px auto 20px;
    display: flex;
    align-items: flex-start;
    .caidan {
      width: 230px;
      height: 900px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      /deep/ .el-avatar > img {
        width: 100%;
      }
      .img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: block;
        margin: 50px auto 20px;
      }
      .name {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        text-align: center;
      }
      .list {
        width: 100%;
        margin-top: 46px;
        .ul {
          width: 100%;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          margin: 30px 0;
          padding-left: 32px;
          cursor: pointer;
          a {
            text-decoration: none;
            color: #333;
          }
          a:hover,
          a:visited,
          a:link,
          a:active {
            color: #333;
            // 设置使所有a标签的四种状态都和本身颜色保持一致，样式代码自己写
          }
          &.sta {
            color: #1a69e0;
            position: relative;
            &::after {
              content: '';
              position: absolute;
              width: 3px;
              height: 25px;
              background: #1a69e0;
              left: 0px;
              top: -3px;
            }
          }
        }
      }
    }
    .lu {
      margin-left: 20px;
      width: 1150px;
      /deep/ .el-breadcrumb {
        height: 60px;
        font-size: 14px;
        line-height: 60px;
        .el-breadcrumb__inner {
          color: #999;
          font-weight: 500;
        }
        .dangqian .el-breadcrumb__inner {
          color: #1a69e0;
        }
      }
      .v-enter {
        opacity: 0;
      }
      .v-enter-active {
        transition: 0.2s;
      }
      .v-enter-to {
        opacity: 1;
      }
      .v-leave {
        opacity: 1;
      }
      .v-leave-to {
        opacity: 0;
      }
      .v-leave-active {
        transition: 0.2s;
      }
    }
  }
  .right {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 99;
    // &.right1 {
    //   position: fixed;
    //   top: 0px;
    // }
    .one1 {
      width: 40px;
      height: 949px;
      background: rgba(224, 68, 26, 0.05);
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #e0441a;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .rl {
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
      }
    }
    .one2 {
      width: 258px;
      height: 950px;
      background: rgba(224, 68, 26, 0.05);
      padding: 20px;
      .a {
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000000;
        i {
          padding: 5px;
          cursor: pointer;
          border-radius: 50%;
          font-weight: bold;
          font-size: 20px;
        }
      }
      .b {
        margin-top: 50px;
        .juan {
          width: 220px;
          height: 90px;
          margin: 10px 0;
          display: flex;
          align-items: center;
          font-size: 9px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #ffffff;
          cursor: pointer;
          .left3 {
            width: 150px;
            text-align: center;
            position: relative;
            &::after {
              content: '';
              position: absolute;
              bottom: 16px;
              left: 12px;
              background: #fff;
              width: 126px;
              height: 1px;
              transform: scaleY(0.5);
            }
            .a1 {
              font-size: 14px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #ffffff;
              span {
                font-size: 24px;
                font-family: FZLanTingHei-B-GBK;
                font-weight: bold;
              }
            }
            .a2 {
              font-size: 12px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #ffffff;
              margin: 6px 0 11px 0;
            }
          }
          .right3 {
            flex: 1;
            font-size: 16px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #7d7d7d;
            padding: 4px;
            text-align: center;
            &.a4 {
              color: #e0441a;
              padding: 12px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>